<template>
    <!-- infinite-scroll element-plus的无限滚动控件 -->
    <ContentPanel :showTopBorder="true" :infinite-scroll-immediate="false" v-infinite-scroll="loadApply">
        <div>
            <div class="apply-item" v-for="(item, index) in applyList" :key="index">
                <!-- 用户/群聊 用不同的样式 显示不同的提示 -->
                <div :class="['contact-type', item.contactType == 'USER' ? 'user-contact' : '']">
                    {{ item.contactType == 'USER' ? '用户' : '群聊' }}
                </div>
                <!-- 头像 -->
                <Avatar :width="50" :userId="item.contactType == 'USER' ? item.applyUserId : item.groupId"></Avatar>
                <!-- 申请信息 -->
                <div class="contact-info">
                    <div v-if="item.contactType == 'USER'">
                        <div class="nick-name"> {{ item.applyUserName }} 申请添加你为好友</div>
                        <div class="apply-info"> {{ item.applyInfo }}</div>
                    </div>
                    <div v-else>
                        <div class="nick-name"> {{ item.applyUserName }} 申请加入群聊: {{ item.groupName }}</div>
                        <div class="apply-info"> {{ item.applyInfo }}</div>
                    </div>
                </div>
                <div>
                    <!-- 未处理过的请求会显示操作按钮 -->
                    <div v-if="item.status == 'PENDING'">
                        <!-- 操作按钮 -->
                        <div class="op-btn">
                            <!-- 下拉选择 -->
                            <el-dropdown placement="bottom-end" trigger="click">
                                <span class="el-dropdown-link">
                                    <el-button type="primary" size="small">操作</el-button>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-item
                                        @click="dealWithApply(item.applyId, item.contactType, 'AGREED')">同意</el-dropdown-item>
                                    <el-dropdown-item
                                        @click="dealWithApply(item.applyId, item.contactType, 'REJECTED')">拒绝</el-dropdown-item>
                                    <el-dropdown-item
                                        @click="dealWithApply(item.applyId, item.contactType, 'BLOCKED')">拉黑</el-dropdown-item>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <!-- 已处理过的请求会显示处理状态 -->
                    <div v-else>
                        <div class="result-name">
                            <div v-if="item.status == 'AGREED'">已同意</div>
                            <div v-if="item.status == 'REJECTED'">已拒绝</div>
                            <div v-if="item.status == 'BLOCKED'">已拉黑</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="applyList.length == 0" class="no-data"> 暂无申请</div>
    </ContentPanel>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router"
const route = useRoute();
const router = useRouter();

const applyList = ref([]);

let pageNo = 0;
let pageTotal = 1;

const loadApply = async () => {
    pageNo++
    if (pageNo > pageTotal) {
        return;
    }
    let result = await proxy.Request({
        method: "get",
        url: proxy.Api.loadApply,
        params: {
        }
    })
    if (!result) {
        return;
    }
    pageTotal = result.data.pageTotal;
    if (result.data.pageNo == 1) {
        // 第一页的话，清空列表
        applyList.value = [];
    }
    // 添加数据
    applyList.value = applyList.value.concat(result.data.data);
};
loadApply();

import { useContactStateStore } from "@/stores/ContactStateStore"
const contactStateStore = useContactStateStore();

const dealWithApply = async (applyId, contactType, status) => {
    contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
    proxy.Confirm({
        message: '确定要执行该操作吗？',
        okFun: async () => {
            let result = await proxy.Request({
                method: "post",
                url: proxy.Api.dealWithApply,
                params: {
                    applyId,
                    status
                }
            })
            if (!result) {
                return;
            }
            // 刷新申请列表
            pageNo = 0;
            loadApply();
            if (status == 'AGREED') {
                // 刷新联系人列表
                if (contactType == 'USER') {
                    contactStateStore.setContactReload("USER")
                }
                else if (contactType == 'GROUP') {
                    contactStateStore.setContactReload("GROUP")
                }
            }
            proxy.Message.success("操作成功！")
        }
    })
}

// 监听申请数量的改变
import { useMessageCountStore } from "@/stores/MessageCountStore"
const messageCountStore = useMessageCountStore();

watch(
    () => messageCountStore.messageCount.contactApplyCount,
    (newVal, oldVal) => {
        if (newVal > 0) {
            pageNo = 0;
            loadApply();  // 重新加载一下，防止因为停留在申请页面而没有重新加载数据
        }
    }
)
</script>

<style lang="scss" scoped>
.apply-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;

    .contact-type {
        display: flex;
        justify-content: center;
        writing-mode: vertical-rl;
        vertical-align: middle;
        background: #2cb6fe;
        color: #fff;
        border-radius: 5px 0 0 5px;
        height: 50px;
    }

    .user-contact {
        background: #08bf61;
    }

    .contact-info {
        width: 260px;
        margin-left: 10px;

        .nick-name {
            color: #000000;
        }

        .apply-info {
            color: #999999;
            font-size: 12px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .op-btn {
        width: 50px;
        text-align: center;
    }

    .result-name {
        color: #999999;
        font-size: 12px;
    }
}

.no-data {
    padding: 30px 0;
}
</style>
